<template>
  <Tooltip placement="top">
    <template #title>
      <span>显示字段设置</span>
    </template>
    <!--  :get-popup-container="() => (toolTipsRef as HTMLDivElement)" -->
    <Popover
      placement="bottom"
      trigger="click"
      @visible-change="handleChange"
      arrowPointAtCenter
      overlayClassName="details-popover"
    >
      <template #title>
        <div class="flex">
          <Button size="small" type="link" @click="reset" style="margin-left: auto"> 重置 </Button>
        </div>
      </template>
      <template #content>
        <ScrollContainer>
          <CheckboxGroup v-model:value="checkedList" @change="onChange" ref="columnListRef">
            <template v-for="item in list" :key="item[fieldKey]">
              <div class="check-item">
                <Checkbox :value="item[fieldKey]">
                  {{ item.title }}
                </Checkbox>
              </div>
            </template>
          </CheckboxGroup>
        </ScrollContainer>
      </template>
      <span ref="toolTipsRef" class="details-tooltips">
        <SettingOutlined style="font-size: 20.8px" />
      </span>
    </Popover>
  </Tooltip>
</template>

<script setup lang="ts">
  import { computed, ref } from 'vue';
  import { Tooltip, Popover, Checkbox, Button } from 'ant-design-vue';
  import { ScrollContainer } from '/@/components/Container';
  import { SettingOutlined } from '@ant-design/icons-vue';
  import { CommonParam } from '../types';

  const CheckboxGroup = Checkbox.Group;

  const props = defineProps({
    list: {
      type: Array as PropType<CommonParam[]>,
      default: () => [],
    },
    fieldKey: {
      type: String,
      default: 'id',
    },
    checked: {
      type: Array as PropType<string[] | number[]>,
      default: () => [],
    },
    defaultKeys: {
      type: Array as PropType<string[] | number[]>,
      default: () => [],
    },
  });

  const emit = defineEmits(['change', 'update:checked']);

  const toolTipsRef = ref<HTMLDivElement | null>(null);

  const checkedList = computed<string[] | number[]>({
    get: () => {
      return props.checked;
    },
    set: (val) => {
      emit('update:checked', val);
    },
  });
  // 重置
  const reset = () => {
    emit('update:checked', props.defaultKeys);
    emit('change', props.defaultKeys);
  };

  const handleChange = (visible) => {
    console.log(visible);
  };

  const onChange = (val) => {
    emit('change', val);
  };
</script>

<style lang="less" scoped>
  .scrollbar {
    height: 420px;
  }

  .check-item {
    display: flex;
    align-items: center;
    min-width: 100%;
    padding: 4px 16px 8px 0;

    .ant-checkbox-wrapper {
      width: 100%;

      &:hover {
        color: @primary-color;
      }
    }
  }

  .details-tooltips {
    margin-left: auto;
  }
</style>
<style>
  .details-popover > .ant-popover-content {
    width: 300px;
  }
</style>
